<template>
  <a-modal
    v-model="show"
    title="查看房产"
    width="900px"
    :maskClosable="false"
    :footer="null"
    @cancel="$emit('close', false)"
  >
    <div class="deal-detail">
      <a-spin tip="Loading..." :spinning="loading">
        <BaseTable
          rowKey="id"
          :columns="columns"
          :dataSource="data"
          hidePagination
          hideSelect
        ></BaseTable>

        <BaseTable
          rowKey="id"
          :loading="loading"
          :columns="columns2"
          :dataSource="list"
          hidePagination
          hideSelect
        ></BaseTable>
      </a-spin>
    </div>
  </a-modal>
</template>

<script>
import httpApi from "@/api/account";
import BaseTable from "@/components/BaseTable";
import ClipseImg from "@/components/ClipseImg/Index.vue";

export default {
  components: {
    BaseTable
  },
  data() {
    return {
      show: false,
      loading: false,
      list: [],
      columns: [
        {
          title: "姓名",
          dataIndex: "userName"
        },
        {
          title: "手机号",
          dataIndex: "mobile"
        },
        {
          title: "身份证号",
          dataIndex: "mobile"
        },
        {
          title: "昵称",
          dataIndex: "mobile"
        }
      ],
      columns2: [
        {
          title: "小区",
          dataIndex: "userName"
        },
        {
          title: "楼栋号",
          dataIndex: "mobile"
        },
        {
          title: "门牌号",
          dataIndex: "mobile"
        },
        {
          title: "产权面积",
          dataIndex: "mobile"
        },
        {
          title: "截图",
          dataIndex: "image",
          customRender: (image = "") => {
            return <ClipseImg image={image}></ClipseImg>;
          }
        },
        {
          title: "操作",
          eclipse: true,
          customRender: (v, row) => {
            return (
              <div class="operate-td" v-auth="owner.unbind">
                <a-popconfirm
                  title="你确定要解绑吗？"
                  onConfirm={() => this.handleUnbind(row)}
                >
                  <a>解绑</a>
                </a-popconfirm>
              </div>
            );
          }
        }
      ]
    };
  },
  props: {
    visible: {
      type: Boolean,
      required: true,
      default: false
    },
    data: {
      type: Array,
      required: true,
      default: () => []
    }
  },
  watch: {
    visible: {
      immediate: true,
      handler(value) {
        this.show = value;
        // this.getList(); //查询详细信息
      }
    }
  },
  methods: {
    getList() {
      console.log(this.data[0].id);
      httpApi
        .save()
        .then((res) => {
          if (res.retcode === 0) {
            this.list = [];
          } else {
            this.list = [];
          }
        })
        .catch((err) => {
          this.$message.error(err.msg);
        });
    },
    handleUnbind(row) {
      debugger;
      this.loading = true;
      httpApi
        .save({
          id: row.id
        })
        .then((res) => {
          if (res.retcode === 0) {
            this.$message.success(`解绑成功！`);
            this.handleClose();
          } else {
            this.$message.error(`解绑失败！`);
          }
          this.loading = false;
        })
        .catch((err) => {
          this.$message.error(err.msg);
          this.loading = false;
        });
    },
    handleClose() {
      this.$emit("close", false);
    }
  }
};
</script>

<style lang="less" scoped>
/deep/.ant-modal-body {
  padding: 24px 0;
}
.deal-detail {
  min-height: 180px;
  .ant-form {
    padding: 0 44px;
    .pwd-tip {
      height: 34px;
      display: inline-block;
      .font-Medium(14px,rgba(0, 0, 0, 0.35),18px,400);
    }
  }
}
</style>
